<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/hookEcharts.js"></script>

</head>

<body>
    <div class="main">
        <div class="nav">
            <div class="pt">
                <p>智慧园区可视化平台</p>
            </div>
            <div class="nav-middle">
                <div class="inner">
                    <ul>
                        <li>营区态势</li>
                        <li>出入管理</li>
                        <li>监控点位</li>
                        <li>配置中心</li>
                        <li>耗能管理</li>
                    </ul>
                </div>
            </div>
            <div class="time">
                <div>
                    <p>2022-5-20 20:05</p>
                </div>
                <div></div>
            </div>
        </div>
        <div class="by">
            <div class="left">
                <div class="left-top">
                    <div class="hn">
                        <p class="hn-one">当日耗能</p>
                        <p class="hn-two">Kwh</p>
                    </div>
                    <div class="con-wrap">
                        <div class="num1">
                            <span>4</span>
                        </div>
                        <div class="num2">
                            <span>8</span>
                        </div>
                        <div class="num3">
                            <span>7</span>
                        </div>
                        <div class="num4">
                            <span>3</span>
                        </div>
                        <div class="num5">
                            <span>0</span>
                        </div>
                    </div>
                    <div class="left-top-botton">
                        <img src="images/1.png" alt="">
                    </div>
                </div>
                <div class="left-mid">
                    <div class="change">
                        <p>小时用能变化</p>
                        <div class="ds">
                            <div class="d">
                                <p> 点</p>
                            </div>
                            <div class="s">
                                <p>水</p>
                            </div>
                        </div>
                    </div>
                    <div id="left-mid-zst" style="width: 600px;height:400px;">

                    </div>
                </div>
                <div class="left-botton">
                    <div class="change">
                        <p>日用能趋势</p>
                        <div class="ds">
                            <div class="d">
                                <p>电</p>
                            </div>
                            <div class="s">
                                <p>水</p>
                            </div>
                        </div>
                    </div>
                    <div id="left-botton-id"></div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <div class="right-top-left">
                        <p>平均日用量</p>
                        <p class="kwh">6,876 <span>kwh</span></p>
                        <div class="one">
                            <p>按吨日用量</p>
                            <p>2,802</p>
                        </div>

                        <div class="two">
                            <p>环比变化</p>
                            <p>-1%</p>
                        </div>
                    </div>
                    <div class="right-top-left">
                        <p>装机容量</p>
                        <p class="kwh">97,790 <span>KVA</span></p>
                        <div class="one">
                            <p>能耗均值</p>
                            <p>1,834</p>
                        </div>

                        <div class="two">
                            <p>小时最大消耗</p>
                            <p>2919</p>
                        </div>
                    </div>
                    <div class="right-top-right">
                        <div class="panel">
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/chip.svg" alt="">
                                </div>
                                <div class="count_sum">
                                    <p class="count">273</p>
                                    <p class="count-text">主变台数</p>
                                    <p>(台)</p>
                                </div>

                            </div>
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/luyou.svg" alt="">
                                </div>
                                <div class="count_sum">
                                    <p class="count">50170</p>
                                    <p class="count-text">计量台数</p>
                                    <p>(个)</p>
                                </div>
                            </div>
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/meter.svg" alt="">
                                </div>
                                <div class="count_sum">
                                    <p class="count">101</p>
                                    <p class="count-text">网关个数</p>
                                    <p>(个)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-mid">
                    <div class="right-mid-left">
                        <p> 用能分析</p>
                        <div id="right-mid-left-id" style="width: 600px;height:320px;"></div>
                    </div>
                    <div class="right-mid-right">
                        <div id="right-mid-right-id">

                        </div>
                    </div>
                </div>
                <div class="right-botton">
                    <p class="botton-p">地点耗能情况</p>
                    <div class="line-wrap">
                        <div class="line1" style="width: 190px;height:160px;"></div>
                        <div class="line2" style="width: 190px;height:160px;"></div>
                        <div class="line3" style="width: 190px;height:160px;"></div>
                        <div class="line4" style="width: 190px;height:160px;"></div>
                        <div class="line5" style="width: 190px;height:160px;"></div>
                        <div class="line6" style="width: 190px;height:160px;"></div>
                    </div>
                    <div class="line-wrap-two">
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">一号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">二号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">三号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">四号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">五号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="line" style="width: 190px;height:80px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td rowspan="3">六号楼</td>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>

                                    </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>

</body>

</html>